<template>
  <a-spin :spinning="spinning">
    <a-modal
      v-model:open="show"
      width="40%"
      centered
      :title="title"
      :footer="null"
      @cancel="cancelModal"
    >
      <a-form
        ref="formRef"
        class="form"
        :model="formData"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <template v-if="current === 1">
          <a-form-item ref="companyName" label="营业执照" name="companyName">
            <a-input
              :bordered="false"
              class="h-form-input"
              v-model:value="formData.companyName"
            />
          </a-form-item>
          <a-form-item ref="idcardNo" label="执照代码" name="idcardNo">
            <a-input
              :bordered="false"
              class="h-form-input"
              v-model:value="formData.idcardNo"
            />
          </a-form-item>
          <a-form-item ref="companyUser" label="企业法人" name="companyUser">
            <a-input
              :bordered="false"
              class="h-form-input"
              v-model:value="formData.companyUser"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 3, span: 16 }">
            <div class="btns center">
              <a-space>
                <a-button>重置</a-button>
                <a-button type="primary" @click="handleNext(1)"
                  >进行验证</a-button
                >
              </a-space>
            </div>
          </a-form-item>
        </template>
        <template v-else-if="current === 2">
          <a-form-item ref="name" label="姓名" name="name">
            <a-input
              :bordered="false"
              class="h-form-input"
              v-model:value="formData.name"
            />
          </a-form-item>
          <a-form-item ref="cardNumber" label="证件号码" name="cardNumber">
            <a-input
              :bordered="false"
              class="h-form-input"
              v-model:value="formData.cardNumber"
            />
          </a-form-item>
          <a-form-item ref="endTime" label="有效期" name="endTime">
            <a-input
              :bordered="false"
              class="h-form-input"
              v-model:value="formData.endTime"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 3, span: 16 }">
            <div class="btns center">
              <a-space>
                <a-button>重置</a-button>
                <a-button type="primary" @click="handleNext(2)"
                  >进行验证</a-button
                >
              </a-space>
            </div>
          </a-form-item>
        </template>
        <template v-else-if="current === 3">
          <div class="content"></div>
          <div class="btns center">
            <a-space>
              <a-button type="danger">拒绝并退出注册</a-button>
              <a-button type="primary" @click="handleNext(3)"
                >已阅读并同意注册</a-button
              >
            </a-space>
          </div>
        </template>
      </a-form>
    </a-modal>
  </a-spin>
</template>
<script setup>
import { vaildBusinessLicense, vaildRealAuth } from "@/api/user";
import { ref, toRefs } from "vue";
const props = defineProps(["show", "title", "current", "formData"]);
const { show, title, current, formData } = toRefs(props);
const formRef = ref(null);
const spinning = ref(false)
const labelCol = {
  span: 3,
};
const wrapperCol = {
  span: 18,
};
const rules = {
  companyName: [
    {
      required: true,
      message: "请输入营业执照",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  idcardNo: [
    {
      required: true,
      message: "请输入执照代码",
      trigger: "blur",
    },
  ],
  companyUser: [
    {
      required: true,
      message: "请输入企业法人",
      trigger: "blur",
    },
  ],
  cardNumber: [
    {
      required: true,
      message: "请输入证件号码",
      trigger: "blur",
    },
  ],
  endTime: [
    {
      required: true,
      message: "请输入有效期",
      trigger: "blur",
    },
  ],
};
const emits = defineEmits("changeCurrentState", "closeModal");
const license = ref("");
const handleNext = () => {
  spinning.value = true;
  if (current.value === 1) {
    license.value = formData.value.url;
    formRef.value
      .validate()
      .then(() => {
        vaildBusinessLicense({ image: formData.value.url }).then((res) => {
          if (res.code == 200) {
            emits("changeCurrentState", 2);
            spinning.value = false
          }
        });
      })
      .catch((error) => {
        console.log("error", error);
      });
  } else if (current.value === 2) {
    formRef.value
      .validate()
      .then(() => {
        vaildRealAuth({
          idCardCopy: formData.value.idCardCopy,
          idCardNational: formData.value.idCardNational,
          image: license.value,
        }).then((res) => {
          if (res.code == 200) {
            emits("changeCurrentState", 3);
            spinning.value = false
          }
          emits("changeCurrentState", 3);
        });
      })
      .catch((error) => {
        console.log("error", error);
      });
  } else if (current.value === 3) {
    emits("changeCurrentState", 4);
  }
};
const cancelModal = () => {
  emits("closeModal", false);
};
</script>
<style scoped lang="less">
.form {
  margin-top: 24px;
}
.content {
  background: #f4f6f8;
  border-radius: 8px;
  margin-top: 20px;
  min-height: 200px;
  margin-bottom: 40px;
}
.h-form-input {
  background-color: #f3f5f7;
}
</style>
